<template>
    <el-dialog title="生产指令派单" :visible.sync="visible" width="600px" append-to-body @close="handleClose"
        :before-close="handleClose" custom-class="dispatch-dialog">
        <!-- 核心警告区域：顶部醒目提示（简化样式，保留核心提醒） -->
        <div class="warning-bar">
            <i class="el-icon el-icon-warning warning-icon"></i>
            <div class="warning-content">
                <p class="warning-title">派单操作警告</p>
                <p class="warning-desc">1. 请核对生产指令编号、接单人员信息，错误派单影响生产；2. 提交后修改需前往「派单操作界面」。</p>
            </div>
        </div>

        <el-form ref="dispatchForm" :model="form" :rules="rules" label-width="120px" class="mt20">
            <!-- 生产指令编号（只读） -->
            <el-form-item label="生产指令编号" prop="orderCode" class="form-item">
                <el-input v-model="form.orderCode" placeholder="生产指令编号" readonly class="readonly-input" />
            </el-form-item>

            <el-form-item label="派单名称" prop="workName" class="form-item">
                <el-input v-model="form.workName" placeholder="派单名称" class="readonly-input" />
            </el-form-item>

            <!-- 派单人 -->
            <el-form-item label="派单人" prop="dispatchPerson" class="form-item">
                <el-input v-model="form.dispatchPerson" placeholder="请输入派单人昵称" class="form-input" />
            </el-form-item>

            <!-- 接单人员信息分组 -->
            <div class="form-group">
                <div class="group-title">
                    <i class="el-icon el-icon-user group-icon"></i>
                    接单人员信息
                </div>

                <!-- 接单人员：输入框 + 右侧选择按钮（直观交互） -->
                <el-form-item label="接单人员" prop="receivePerson" class="form-item">
                    <!-- 用 el-input-group 组合输入框和按钮，保证样式对齐 -->
                    <el-input-group class="select-user-group">
                        <!-- 显示选中的人员昵称，只读 -->
                        <el-input v-model="form.receivePerson" placeholder="请选择接单人员"
                            class="form-input select-user-input" readonly @click="openUserSelectDialog" />
                        <!-- 右侧明确的“选择”按钮（核心交互入口） -->
                        <el-button type="primary" icon="el-icon-user" size="mini" @click="openUserSelectDialog"
                            class="select-user-btn">
                            选择
                        </el-button>
                    </el-input-group>
                </el-form-item>

                <!-- 接单用户ID：选择人员后自动填充，只读 -->
                <el-form-item label="接单用户ID" prop="userId" class="form-item">
                    <el-input v-model="form.userId" placeholder="选择人员后自动填充" class="form-input" readonly />
                </el-form-item>
            </div>

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button @click="visible = false" class="cancel-btn">取消</el-button>
            <el-button type="primary" @click="submit" class="submit-btn">
                <i class="el-icon el-icon-check submit-icon"></i>
                确认派单
            </el-button>
        </div>

        <!-- 引入用户选择组件 -->
        <user-select-dialog :visible.sync="userSelectVisible" @select="handleUserSelected" />


    </el-dialog>
</template>

<script>
import { addDispatch } from "@/api/product/dispatch"
import { getInfo } from "@/api/login"
// 引入用户选择组件
import UserSelectDialog from "./UserSelectDialog.vue"

export default {
    name: "DispatchDialog",
    components: {
        UserSelectDialog // 注册组件
    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        orderCode: {
            type: String,
            default: ""
        }
    },
    data() {
        return {
            form: {
                orderCode: "",
                workName: "", // 新增派单名称字段
                dispatchPerson: "",
                receivePerson: "",
                userId: "",
                dispatchStatus: 1,
                rejectReason: ""
            },
            rules: {
                orderCode: [{ required: true, message: "生产指令编号不能为空", trigger: "blur" }],
                workName: [{ required: true, message: "派单名称不能为空", trigger: "blur" }],
                dispatchPerson: [{ required: true, message: "请输入派单人昵称", trigger: "blur" }],
                receivePerson: [{ required: true, message: "请输入接单人员昵称", trigger: "blur" }],
                userId: [{ required: true, message: "请输入接单用户ID", trigger: "blur" }],
                dispatchStatus: [{ required: true, message: "请选择派单状态", trigger: "change" }]
            },
            userSelectVisible: false // 新增：控制用户选择对话框显隐
        }
    },
    watch: {
        orderCode(newVal) {
            this.form.orderCode = newVal
        },
        visible(newVal) {
            if (newVal) {
                this.initForm()
            }
        }
    },
    created() {
        this.getCurrentUser()
    },
    methods: {
        getCurrentUser() {
            getInfo().then(res => {
                this.form.dispatchPerson = res.user?.nickName || "";
            }).catch(err => {
                console.error("获取当前用户信息失败：", err);
                this.$modal.msgWarning("获取用户信息失败，请手动输入派单人");
            });
        },
        initForm() {
            this.form = {
                ...this.form,
                orderCode: this.orderCode,
                workName: "", // 重置派单名称
                receivePerson: "",
                userId: "",
                rejectReason: ""
            }
            this.$refs.dispatchForm?.resetFields()
        },
        // 打开用户选择对话框
        openUserSelectDialog() {
            this.userSelectVisible = true
        },
        // 处理选择的用户
        handleUserSelected(user) {
            this.form.receivePerson = user.nickName
            this.form.userId = user.userId.toString()
        },
        submit() {
            this.$refs.dispatchForm.validate(valid => {
                if (!valid) {
                    this.$modal.msgWarning("表单填写不完整或格式有误，请检查后重试");
                    const errorFields = this.$refs.dispatchForm.fields.filter(field => field.validateState === "error");
                    if (errorFields.length > 0) {
                        errorFields[0].$el.scrollIntoView({ behavior: "smooth", block: "center" });
                        errorFields[0].$el.classList.add("error-highlight");
                        setTimeout(() => errorFields[0].$el.classList.remove("error-highlight"), 1500);
                    }
                    return;
                }

                addDispatch(this.form)
                    .then(() => {
                        this.$modal.msgSuccess("派单成功");
                        this.visible = false;
                        this.$emit("dispatchSuccess");
                    })
                    .catch(err => {
                        console.error("派单接口调用失败：", err);
                        this.$modal.msgError("派单失败：" + (err.response?.data?.msg || err.message || "网络异常"));
                    });
            });
        },
        handleClose() {
            this.$emit("update:visible", false)
        }

    }
}
</script>

<style scoped>
.mt20 {
    margin-top: 20px;
}

/* 1. 对话框整体优化：圆角+柔和阴影 */
.dispatch-dialog {
    --el-dialog-content-padding: 22px;
    border-radius: 10px !important;
    /* 对话框圆角 */
    box-shadow: 0 3px 15px rgba(0, 0, 0, 0.06) !important;
    /* 柔和阴影 */
}

.dispatch-dialog .el-dialog__header {
    padding: 16px 22px;
    border-bottom: 1px solid #f5f7fa;
    /* 浅灰边框，更柔和 */
}

.dispatch-dialog .el-dialog__title {
    font-size: 16px;
    font-weight: 600;
    color: #1d2129;
    /* 深灰文字，更清晰 */
}

/* 2. 警告栏优化：柔和色彩+圆角 */
.warning-bar {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 12px 16px;
    background-color: #fff8e6;
    border-left: 4px solid #ffb020;
    /* 暖橙色，不刺眼 */
    border-radius: 8px;
    margin-bottom: 20px;
}

.warning-icon {
    color: #ffb020;
    font-size: 18px;
    margin-top: 2px;
}

.warning-title {
    font-size: 14px;
    font-weight: 600;
    color: #e67e22;
    margin-bottom: 3px;
}

.warning-desc {
    font-size: 12px;
    color: #6e7681;
    line-height: 1.5;
}

/* 3. 表单分组优化：卡片化+轻微阴影 */
.form-group {
    margin: 18px 0;
    padding: 18px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    /* 淡阴影，提升层次 */
    border: 1px solid #f5f7fa;
}

.group-title {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: -18px -18px 15px;
    padding: 10px 18px;
    font-size: 14px;
    color: #4e5969;
    background-color: #fafbfc;
    border-radius: 8px 8px 0 0;
    border-bottom: 1px solid #f5f7fa;
}

.group-icon {
    color: #409eff;
    font-size: 15px;
}

/* 4. 表单项优化：统一间距+输入框质感 */
.form-item {
    margin-bottom: 16px;
}

.el-form-item__label {
    font-weight: 500;
    color: #4e5969;
    font-size: 13px;
}

/* 输入框样式优化 */
.form-input {
    height: 38px;
    border-radius: 6px;
    border-color: #e5e6eb;
    transition: all 0.2s ease;
}

.form-input:focus {
    border-color: #409eff;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.15);
    /* 柔和聚焦效果 */
}

/* 只读输入框优化 */
.readonly-input {
    height: 38px;
    border-radius: 6px;
    background-color: #fafbfc;
    color: #86909c;
    cursor: not-allowed;
    border-color: #f0f2f5;
}

/* 5. 底部按钮优化：统一尺寸+hover效果 */
.dialog-footer {
    display: flex;
    justify-content: flex-end;
    gap: 12px;
    padding: 15px 22px;
    border-top: 1px solid #f5f7fa;
    margin-top: 10px;
}

.cancel-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    border-color: #e5e6eb;
    transition: all 0.2s;
}

.cancel-btn:hover {
    background-color: #f5f7fa;
    border-color: #d1d5db;
}

.submit-btn {
    height: 36px;
    padding: 0 16px;
    border-radius: 6px;
    transition: all 0.2s;
}

.submit-btn:hover {
    background-color: #337ecc;
    box-shadow: 0 3px 8px rgba(64, 158, 255, 0.15);
    /* 轻微hover阴影 */
}

.submit-icon {
    margin-right: 5px;
    font-size: 14px;
}

/* 6. 错误提示优化：柔和抖动 */
.error-highlight {
    animation: shake 0.4s ease-in-out;
    border-color: #f56c6c !important;
    box-shadow: 0 0 0 2px rgba(245, 108, 108, 0.15) !important;
}

@keyframes shake {

    0%,
    100% {
        transform: translateX(0);
    }

    20%,
    60% {
        transform: translateX(-2px);
    }

    40%,
    80% {
        transform: translateX(2px);
    }
}

/* 1. 调整输入框组样式，确保输入框和按钮高度对齐 */
.select-user-group {
    display: flex;
    align-items: center;
    height: 38px;
    /* 与输入框高度一致，避免变形 */
    width: 100%;
}

/* 2. 输入框样式：提示可点击 + hover反馈 */
.select-user-input {
    cursor: pointer;
    /* 鼠标悬浮显示“手”形，提示可点击 */
    background-color: #f8fafc !important;
    /* 浅底色区分普通输入框 */
    border-right: none !important;
    /* 取消输入框右侧边框，与按钮无缝衔接 */
    border-radius: 6px 0 0 6px !important;
    /* 只保留左侧圆角 */
}

.select-user-input:hover {
    border-color: #409eff !important;
    /* hover 时高亮边框，增强交互感 */
}

/* 3. 选择按钮样式：与输入框对齐 + 固定高度 */
.select-user-btn {
    height: 100% !important;
    /* 按钮高度占满输入框组，避免上下留白 */
    border-radius: 0 6px 6px 0 !important;
    /* 只保留右侧圆角，与输入框呼应 */
    padding: 0 12px;
    /* 调整按钮内边距，避免文字拥挤 */
}
</style>